<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="lib/mui.min.css" rel="stylesheet" />
	</head>
	<style>
		html {
			font-size: 20px;
		}
		
		ul {
			margin: 0;
			padding: 0;
		}
		
		p {
			margin: 0;
		}
		
		a:link,
		a:visited,
		a:hover {
			color: #4C4C4C;
			text-decoration: none;
		}
		
		li {
			list-style: none;
		}
		
		.list_item {
			padding: 10px;
		}
		
		.user_pane {
			position: relative;
			padding-left: 30px;
			margin-bottom: 10px;
			height: 25px;
		}
		
		.list_box li {
			position: relative;
			border-bottom: 1px solid #f0f0f0;
			font-size: 16px;
			background: #fff;
			overflow: hidden;
			margin-bottom: 10px;
		}
		
		.user_pane img {
			width: 25px;
			height: 25px;
			border-radius: 50px;
			-moz-border-radius: 50px;
			-webkit-border-radius: 50px;
			position: absolute;
			left: 0px;
		}
		
		.user_pane a {
			display: inline-block;
			max-width: 160px;
			height: 25px;
			line-height: 25px;
			overflow: hidden;
		}
		
		
		
		.y {
			float: right !important;
		}
		
		.list_center {
			font-size: 16px;
			line-height: 25px;
			display: block;
		}
		
		.h_over_nav {
			max-height: 62px;
			overflow: hidden;
		}
		
		.h_over_nav .title {
			display: -webkit-box;
			overflow: hidden;
			-webkit-box-orient: vertical;
			position: relative;
			margin-bottom: 2px;
			font-size: 17px;
			font-weight: normal;
			line-height: 20px;
			word-break: break-all;
			color: #454545;
			-webkit-line-clamp: 2;
			text-overflow: ellipsis;
		}
		
		.h_over_nav .title_con {
			display: -webkit-box;
			overflow: hidden;
			-webkit-box-orient: vertical;
			margin-bottom: 2px;
			padding-top: 2px;
			font-size: 14px;
			line-height: 18px;
			word-break: break-all;
			color: gray;
			-webkit-line-clamp: 2;
			text-overflow: ellipsis;
		}
		
		.delayload_div {
			text-align: center;
		}
		
		.list_top p {
			float: left;
			width: 32%;
			margin-right: 2%;
			margin-top: 10px;
			position: relative;
		}
		
		.list_top p:nth-of-type(3n) {
			margin-right: 0;
		}
		
		.list_top p img {
			width: 100%;
			height: 93px;
			background: #efede9;
		}
		
		a img {
			border: none;
		}
		
		.nickname {
			display: inline-block;
			height: 25px;
			line-height: 25px;
		}
		
		.by {
			font-size: 12px;
			color: #A5A5A5;
			display: block;
		}
		
		.by b {
			line-height: 30px;
			font-size: 12px;
			font-weight: normal;
		}
		
		.num {
			padding-left: 12px;
			font-size: 13px;
			color: #888;
		}
		
		.browse_record {
			margin-right: 5px;
			font-size: 13px;
			color: #888;
		}
		
		.y img {
			margin-right: 2px;
			width: 18px;
			height: 18px;
			margin-top: 4px;
			float: left;
		}
		
		.by a {
			font-size: 16px;
			line-height: 26px;
			height: 26px;
			display: block;
		}
		
		.pic_single p {
			padding: 0;
			margin: 0;
			float: left;
			width: 100%;
			margin-top: 6px;
			position: relative
		}
		
		.pic_single p img {
			width: 100%;
			height:180px ;
		}
		
		.pic_double p{
			width: 49%;
			float: left;
			margin-right: 2%;
		}
		.pic_double p:nth-of-type(2){
			margin-right: 0;
		}
		
		.pic_double p img{
			height: 120px;
		}
	</style>

	<body>
		<ul class="list_box">
			<li class="list_item">
				<div class="list_top">
					<div class="user_pane">
						<a href="#">
							<img src="http://bbs.hcbbs.com/uc_server/avatar.php?uid=798566&amp;size=small">
							<span class="nickname">hai8487</span>
						</a>

						<span class="y">
			                <a href="#" class="module">
			                    #净化技术版#
			                </a>
			            </span>

					</div>

					<a href="#" class="list_center">
						<div class="h_over_nav">
							<h3 class="title">阀门腐蚀分析</h3>
							<div class="title_con">图为粗煤气/变换气换热器管程（粗煤气）出口阀门检修时的照片，</div>

						</div>
						<div class="pic_box">
							<p class="delayload_div"><img src="img/001.jpg"></p>

							<p class="delayload_div"><img src="img/cbd.jpg"></p>

							<p class="delayload_div"><img src="img/muwu.jpg"></p>
						</div>
					</a>
				</div>
				<p class="by" style="clear: both">
					<a href="#">
						<b>1&nbsp;小时前</b>
						<span class="num y"><img src="img/read.png">0</span>
						<span class="y browse_record"><img src="img/commen.png">0</span>
					</a>
				</p>
			</li>

			<li class="list_item">
				<div class="list_top">
					<div class="user_pane">
						<a href="#">
							<img src="http://bbs.hcbbs.com/uc_server/avatar.php?uid=798566&amp;size=small">
							<span class="nickname">hai8487</span>
						</a>

						<span class="y">
			                <a href="#">
			                    #净化技术版#
			                </a>
			            </span>

					</div>

					<a href="#" class="list_center">
						<div class="h_over_nav">
							<h3 class="title">阀门腐蚀分析</h3>
							<div class="title_con">图为粗煤气/变换气换热器管程（粗煤气）出口阀门检修时的照片，</div>

						</div>
						<div class="pic_box">
							<p class="delayload_div"><img src="img/001.jpg"></p>

							<p class="delayload_div"><img src="img/cbd.jpg"></p>

							<p class="delayload_div"><img src="img/muwu.jpg"></p>
						</div>
					</a>
				</div>
				<p class="by" style="clear: both">
					<a href="#">
						<b>1&nbsp;小时前</b>
						<span class="num y"><img src="img/read.png">0</span>
						<span class="y browse_record"><img src="img/commen.png">0</span>
					</a>
				</p>
			</li>

			<li class="list_item">
				<div class="list_top">
					<div class="user_pane">
						<a href="#">
							<img src="http://bbs.hcbbs.com/uc_server/avatar.php?uid=798566&amp;size=small">
							<span class="nickname">hai8487</span>
						</a>

						<span class="y">
			                <a href="#">
			                    #净化技术版#
			                </a>
			            </span>

					</div>

					<a href="#" class="list_center">
						<div class="h_over_nav">
							<h3 class="title">阀门腐蚀分析</h3>
							<div class="title_con">图为粗煤气/变换气换热器管程（粗煤气）出口阀门检修时的照片，</div>

						</div>
						<div class="pic_box pic_single">
							<p class="delayload_div"><img src="img/001.jpg"></p>
						</div>
					</a>
				</div>
				<p class="by" style="clear: both">
					<a href="#">
						<b>1&nbsp;小时前</b>
						<span class="num y"><img src="img/read.png">0</span>
						<span class="y browse_record"><img src="img/commen.png">0</span>
					</a>
				</p>
			</li>
			
			<li class="list_item">
				<div class="list_top">
					<div class="user_pane">
						<a href="#">
							<img src="http://bbs.hcbbs.com/uc_server/avatar.php?uid=798566&amp;size=small">
							<span class="nickname">hai8487</span>
						</a>

						<span class="y">
			                <a href="#">
			                    #净化技术版#
			                </a>
			            </span>

					</div>

					<a href="#" class="list_center">
						<div class="h_over_nav">
							<h3 class="title">阀门腐蚀分析</h3>
							<div class="title_con">图为粗煤气/变换气换热器管程（粗煤气）出口阀门检修时的照片，</div>

						</div>
						<div class="pic_box pic_double">
							<p class="delayload_div"><img src="img/001.jpg"></p>
							<p class="delayload_div"><img src="img/001.jpg"></p>
						</div>
					</a>
				</div>
				<p class="by" style="clear: both">
					<a href="#">
						<b>1&nbsp;小时前</b>
						<span class="num y"><img src="img/read.png">0</span>
						<span class="y browse_record"><img src="img/commen.png">0</span>
					</a>
				</p>
			</li>
		</ul>
		<script src="lib/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>